<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            /* 样式宽高 */
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <!-- 画布宽高 -->
    <canvas width="512" height="512"></canvas>

    <script>
        // // 设置状态 api  
        // // 绘制指令api
        const canvas = document.querySelector('canvas')
        // 1.绘图上下文
        const context = canvas.getContext('2d')

        // // 2. 设置状态
        // context.save();
        // context.fillStyle = 'red';
        // context.translate(-50,-50);
        // // 3. 开始绘图
        // context.beginPath();
        // // 4. 绘制图形
        // // context.rect(x,y,w,h)
        // context.rect(0.5 * canvas.width, 0.5 * canvas.height, 100, 100)
        // // 5.将图像放入页面中
        // context.fill()
        // context.restore();

        let angle = 0;

        function draw() {
            context.clearRect(0,0,canvas.width,canvas.height);
            context.save();
            context.fillStyle = 'red';
            context.translate(0.5 * canvas.width, 0.5 * canvas.height);
            context.rotate(angle += 0.01);
            context.translate(-50, -50);
            context.beginPath();
            context.rect(0,0,100,100);
            context.fill();
            context.restore();
            requestAnimationFrame(draw)
        }
        draw()
    </script>
</body>

</html>